import React, { Component } from 'react'
import Hrader from '../../../components/head/hrader'
import './myVip.less'
import MyVipexplain from './myVipexplain/myVipexplain'
import cookies from 'js-cookie'
import axios from 'axios';
import nowTime from '../../../components/timer'
import Alert from '../../../components/alert/alert'
import { connect } from 'react-redux';
import fun from '../../../store/action/index'
class MyVip extends Component {
    constructor() {
        super()
        this.state = {
            headtitle: { title: '充值', path: '/my' },
            recharge: [
                { id: 1, age: '50', },
                { id: 2, age: '100', },
                { id: 3, age: '500', },
                { id: 4, age: '800', },
                { id: 5, age: '1000', },
                { id: 6, age: '2000', },
            ],
            nowindex: 1,    //金额  下标  默认  100元
            definemoney: '100',//支付金额  默认100
            textdefinemoney: '',//输入的金额
            nowindextype: 0,//支付类型   微信   支付宝
            payment: [
                { id: 1, icon: 'icon--zhifubao', title: '支付宝' },
                { id: 2, icon: 'iconfont icon-huabei', title: '花呗' },
                { id: 3, icon: 'icon-weixinicon2x', title: '微信' }

            ],//支付方式
            user_data: [],//用户数据
            disabled: false,//禁止按动

            alertFlag: false,//弹层开关
            alerttitle: '充值成功',//弹层提示
            subType: null,//弹层里面确认的类型
        }
    }
    render() {
        let { user_data } = this.state//user_account
        return (
            <div className="myVip_box">
                <div className="myVip_ding">
                    <Hrader title={this.state.headtitle} />
                </div>

                {/* 内容 */}
                <div className="myVip_body">
                    {/* 会员信息 */}
                    <div className="myVip_message">
                        <div className="myVip_messageleft">
                            <div> 账号：<span>{user_data.user_account}</span>
                                <i className={
                                    // this.state.classTitle
                                    user_data.user_vipGrade === '0' ? 'iconfont icon-V0' :
                                        `${user_data.user_vipGrade === '1' ? 'iconfont icon-v1' :
                                            user_data.user_vipGrade === '2' ? 'iconfont icon-V' : 'iconfont icon-V1'}`
                                } id="classV">
                                </i>
                            </div>
                            <div> 积分：<span>{user_data.user_integrate ? user_data.user_integrate : 0}</span> </div>
                        </div>
                        <div className="myVip_messageright">
                            <div>余额</div>
                            <div className="myVip_messagerightDiv"><span className="myVip_balance">{user_data.now_loose ? user_data.now_loose : 0}</span>元</div>
                        </div>
                    </div>
                    {/* 快速充值 */}
                    <div className="myVip_recharge">
                        <div className="myVip_hint">
                            <div className="myVip_hintMessage">
                                <p>-------</p>
                                <p className="myVip_hinttitle">快速充值</p>
                                <p>-------</p>
                            </div>
                        </div>
                        <div className="myVip_money">
                            {this.state.recharge.map((item, index) => {
                                return <p key={item.id}
                                    onClick={() => { this.defineMoney(item.age, index) }}
                                    className={index === this.state.nowindex ? 'myVip_active' : null}>
                                    ￥{item.age}
                                    {index === this.state.nowindex ? <span className="iconfont icon-bianzu17"></span> : null}
                                </p>
                            })}
                            <div>
                                <input type="text" className={`myVip_text ${this.state.nowindex === 6 ? 'myVip_textindex' : null}`}
                                    placeholder="请输入充值金额" maxLength="15"
                                    onChange={(e) => { this.moneyChange(e.target.value) }}
                                    onFocus={() => { this.onFocus() }}
                                    value={this.state.textdefinemoney}
                                />
                            </div>
                        </div>
                        <div>
                            <div className="myVip_hintMessage">
                                <p>-------</p>
                                <p className="myVip_hinttitle">充值方式</p>
                                <p>-------</p>
                            </div>
                        </div>
                        <div className="myVip_moneytype">
                            {this.state.payment.map((item, index) => {
                                return <div key={item.id}
                                    className={index === this.state.nowindextype ? 'myVip_active' : null}
                                    onClick={() => { this.setState({ nowindextype: index }) }}>
                                    <p className={`iconfont ${item.icon}`} ></p>
                                    <div>{item.title}</div>
                                    {index === this.state.nowindextype ? <span className="iconfont icon-bianzu17"></span> : null}
                                </div>
                            })}
                            {0 === this.state.nowindextype ? <p className='myVip_activetext myVip_moneyhint' >本单有免费机会</p> : null}

                        </div>
                        {0 === this.state.nowindextype ?
                            <div className="myVip_zhifubaohint">
                                <input type="checkbox" id="checkbox" />
                                <label htmlFor="checkbox" className="myVip_checkboxLable">支付宝免密(可随时取消，开通后可享受活动优惠)<span>(免密协议)</span></label>
                            </div> : null}
                    </div>
                    {/*  充值说明*/}
                    <MyVipexplain />
                </div>
                {/* 确认 */}
                <div className="myVip_sub">
                    <button className="sub" disabled={this.state.disabled} onClick={() => { this.submit() }}
                        ref={(subDom) => { this.subDom = subDom }}>确认支付￥{this.state.definemoney}</button>
                </div>

                {this.state.alertFlag ? <div className="my_alert">
                    <Alert title={this.state.alerttitle} subType={this.state.subType} alertX={this.alertX} alertSub={this.alertSub}></Alert>
                </div> : null}

            </div>
        )
    }
    defineMoney = (age, index) => {
        this.setState({ definemoney: age, nowindex: index, textdefinemoney: '' })
    }
    moneyChange = (e) => {
        let src = /^[1-9][0-9]*\.?[0-9]{0,2}$/ // 数字
        let flag = src.test(e)
        if (flag || e === '') {
            this.setState({ textdefinemoney: e, definemoney: e })
        }
    }
    onFocus = () => {
        this.setState({ nowindex: 6, definemoney: '' })
    }
    componentDidMount() {
        const _this = this
        if (this.props.message) {
            let { message } = this.props
            // console.log(message);

            this.setState({
                user_data: message,//数据
            })
        } else
            if (cookies.get('usertoken')) {
                axios({
                    method: 'post',
                    url: '/api/front_end/userMess',
                    data: {
                        user_account: cookies.get('usertoken'),
                    }
                }).then((res) => {
                    let datas = res.data
                    // console.log(datas.data);
                    if (datas.code === '01') {
                        _this.setState({
                            user_data: datas.data,//数据
                        })
                    }
                })
            }
    }
    // 充值
    submit = () => {
        this.setState({ disabled: true })//按钮禁用
        let { user_data, definemoney } = this.state
        // console.log(user_data.user_id, definemoney);
        // console.log(nowTime());
        // console.log(definemoney);
        if (definemoney) {
            axios({
                method: 'post',
                url: '/api/front_end/topup',
                data: {
                    user_id: user_data.user_id, //用户id
                    money: definemoney,// 充值钱数
                    timer: nowTime(),// 充值时间
                }
            }).then(res => {
                console.log(res.data.data);
                // alert('充值成功')
                this.setState({ alertFlag: true, alerttitle: '充值成功', subType: 1 })
                this.props.setNav(res.data.data[0])
                this.setState({
                    disabled: false,
                    user_data: res.data.data[0],
                    textdefinemoney: '',//回复初始状态  初始输入
                    nowindex: 1,//回复初始状态  初始下标
                    definemoney: '100'//回复初始状态  初始金额
                })//按钮启用   继续充值
            })
        } else {
            // alert('请选择充值金额')
            this.setState({ alertFlag: true, alerttitle: '请选择充值金额', subType: 1 })
        }

    }
    //关闭弹层 
    alertX = () => {
        this.setState({ alertFlag: false, disabled: false, })
    }
    //弹层确认
    alertSub = () => {
        console.log('确认');
        if (this.state.site_id) {
            axios({
                method: 'post',
                url: '/api/front_end/delSite',
                data: {
                    site_id: this.state.site_id//    地址id
                }
            }).then(res => {
                console.log(res.data);
                if (res.data.code === '01') {
                    this.getData()
                }
            })
        }
        this.setState({ alertFlag: false, disabled: false, })
    }
}
export default connect(state => state.Login, fun.loginAction)(MyVip)